<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>列表页</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1, user-scalable=no">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="../../css/rem.js"></script>
</head>



<body>
	<!--nav-->
	<div id="navbg">
		<div class="left">
			<image class="" src="../../src/img/nav-goback.png" :click='dod'>
			</image>
		</div>
		<div class="mid">
			<p class="mid-p">{{title}}</p>
		</div>
		<div class="right">
			<p class="right-p">
				<div style="width: 100px'"></div>
			</p>
		</div>
	</div>

	<!-- cell-list -->
	<ul id="cell-list">
		<li v-for="item in items">
			<div class="cell-bg">
				<div class="left">
					<p class="up">{{ item.title }}</p>
					<p class="down">{{ item.balance }}</p>
				</div>
				<div class="right">
					<p class="up">{{ item.date }}</p>
					<p class="down">{{ item.money }}</p>
				</div>
			</div>
		</li>
	</ul>


	<script>
		var nav = new Vue({
			el: '#navbg',
			data: {
				title: '收支明细'
			},
			computed: {
			},
			methods: {
				dod: function () {
					console.log('=====')
				}
			}
		})


		var cellList = new Vue({
			el: '#cell-list',
			data: {
				items: [
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					}, {
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
					{
						title: '充值',
						balance: '余额:100',
						date: '2019-09-19',
						money: '-198.98',
					},
				]
			},
			computed: {
			},
			methods: {
			}
		})




	</script>

</body>


<style>
	@import './inoutDetial.css';
	body{
		background-color: #fff
	}

</style>

</html>